<template>
  <div class="search-details">
    <van-tabs style="width: 100%;height: 100%;display: flex;flex-direction: column" v-model="active" class="tab">
      <van-tab title="单曲" >
        <SongList v-loadData="getSongData" class="songs" :songs="songData" />
      </van-tab>
      <van-tab title="歌单">
        <PlayList v-loadData="getPlaylistData" :playLists="playlistData" />
      </van-tab>
    </van-tabs>
  </div>

</template>
<style lang="scss" scoped>
.search-details{
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
.search-details{
  width: 100%;
  height: 100%;
}
.search-details :deep(.van-swipe-item){
  width: 100%;
  height: 100%;
}
.search-details:deep(.van-swipe-item),.search-details:deep(.van-tabs__content){
  width: 100%;
  height: calc(100% - 2.5rem);
}
.search-details:deep(.van-tab__pane){
  width: 100%;
  height: 100%;
}
.search-details :deep(.van-tabs__wrap){
  height: 2.5rem;
}
</style>
<script setup>
import SearchSynthetical from "../components/search/SearchSynthetical.vue";
import {ref} from "@vue/reactivity";
import SongList from "../components/list/SongList.vue";
import {getSearchSongs,getSearchPlaylists} from "../api/api";
import PlayList from "../components/list/PlayList.vue";
import Loading from "../common/Loading";
import {toRefs, watch} from "vue";
let active = ref(0);
let propsDef = defineProps({
  keyword: {
    type: String
  }
});
let props = toRefs(propsDef);
let songPage = 1;
let songData = ref([]);
let playlistPage = 1;
let playlistData = ref([]);
let playlistListLoading = ref(true);


watch(props.keyword,()=>{
  console.log(props.keyword)
  songPage = 1;
  songData.value = [];
  playlistData.value = [];
  playlistPage = 1;
  getPlaylistData();
  getSongData();
},{
  immediate: true
});

function getSongData(){
  Loading.show();
  return getSearchSongs(propsDef.keyword,songPage).then((res)=>{
    Loading.hide();
    songPage ++;
    let songs = res.result.songs ?? [];
    songs.forEach((item) => songData.value.push(item));
  }).catch(()=>{
    Loading.hide();
  });
}


function getPlaylistData(){
  Loading.show();
  return getSearchPlaylists(propsDef.keyword,playlistPage).then((res)=>{
    playlistPage ++;
    playlistListLoading.value = false;
    let playlists = res.result.playlists ?? [];
    playlists.forEach((item) => playlistData.value.push(item));
    Loading.hide();
  }).catch(()=>{
    Loading.hide();
  });
}



</script>